

import './forms.scss'
import { useFormItemInit } from './hooks';
import { FormItemBaseProps } from './interface';
import { useDrag } from './drop.hooks';
import React from 'react';
import { FormBuilder } from '../../utils/form/FormBuilder';
import { Components } from '../..';





interface IProps extends FormItemBaseProps {
}

/** 延迟计时器 */
var timer: any = undefined;

export default function StartEnd(props: IProps) {
    const { formControl, className = '', style = {} } = props;
    const {
        value, setValue,
        readonly,
        outerClassName,
        layout,
        outerStyle,
        labelStyle,
    } = useFormItemInit(formControl, className, style);



    const [formFroup] = React.useState(() => {
        return FormBuilder.group({
            start: FormBuilder.control({ selector: formControl.controlData.startEndType, label: '开始值', showLabel: false }),
            end: FormBuilder.control({ selector: formControl.controlData.startEndType, label: '结束值', showLabel: false }),
        });
    });

    React.useEffect(()=>{
        formFroup.getControl('start')?.valueChange(val=>{
            formControl.startValue = val;
        })
        formFroup.getControl('end')?.valueChange(val=>{
            formControl.endValue = val;
        })
    }, []);


    /** 拖拽排序 */
    const dropRef = React.useRef<HTMLDivElement>(null);
    useDrag({ dropRef, formControl });

    return (
        <div component-name='form-item' className={`${outerClassName}`} style={outerStyle} ref={dropRef}>
            <div className={`field ${layout}`} >
                <Components.forms.FormLabel formControl={formControl} style={labelStyle} />
                <div className={`control`}>
                    <div className="value">
                        <div className='startend'>
                            <div className='start'>
                                {
                                    <Components.forms.Auto formControl={formFroup.getControl('start')!} />
                                }
                            </div>
                            <div className='end'>
                                {
                                    <Components.forms.Auto formControl={formFroup.getControl('end')!} />
                                }
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
